<template>
    <div>
  
      <!-- 搜索框11111 -->
        <div>
        <van-search
        v-model="value"
        show-action
      
        placeholder="搜索菜谱、食谱"
       @search="onSearch" style="margin-left:30px;">
   
     <template #action>
       <div @click="onSearch">搜索</div>
    </template>
</van-search>
</div>
     

     <!-- 内容 -->
     <!-- 1 -->
     <van-row>
   <van-col span="24" style="margin-left:-150px;font-size:15px;font-weight:bolder">菜谱分类</van-col>
   </van-row>
     <!-- 2 -->
     <van-tabs v-model="active" style="margin-top:6px">
   <van-tab title="全部">
   <van-grid>
  <van-grid-item v-for="(item,i) in arr" :key="i">
      <img :src="item.src" alt="">
  </van-grid-item>
  
</van-grid>
  </van-tab>
  <van-tab title="夏日开胃">夏日开胃</van-tab>
  <van-tab title="低脂美食">低脂美食</van-tab>
  <van-tab title="10分钟上桌">10分钟上桌</van-tab>
   </van-tabs>

<!-- 底边  下面的五个分类  可以改但是就是我们 还有就是要改五个 还有路由----------->
    <van-tabbar v-model="dactive">
        <van-tabbar-item icon="home-o" name="home" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" name="fenlei"> 分类</van-tabbar-item>
        <van-tabbar-item icon="orders-o" name="caipu" to="/caipu">菜谱</van-tabbar-item>
        <van-tabbar-item icon="cart-o" name="gouwuche" to="/gouwuche">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager-o" name="wode" to="/wode">我的</van-tabbar-item>
    </van-tabbar>
    </div>
</template>
<script>
export default {
    data(){
        return{
        dactive:'caipu',
        value:'',
        active:'',
        arr:[
            {src:require('../assets/logo.png')},
            {src:require('../assets/logo.png')},
            {src:require('../assets/logo.png')},
            {src:require('../assets/logo.png')},
        ]
       
    }
    },
    methods:{
       onSearch(){

        }
    }
}
</script>